<template>
  <n-layout-sider
    bordered
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    show-trigger
    class="h-screen"
  >
    <div class="p-4 text-center font-bold text-lg text-white bg-[#001529]">
      试飞系统
    </div>
    <n-menu
      :options="menuOptions"
      v-model:value="activeKey"
      @update:value="handleSelect"
      class="sidebar-menu"
    />
  </n-layout-sider>
</template>

<script setup>
import { ref, h, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NLayoutSider, NMenu } from 'naive-ui'
import { 
  HomeOutline, 
  BarChartOutline, 
  LibraryOutline,
  ServerOutline,
  CubeOutline,
  BookOutline,
  ChatbubbleOutline,
  RocketOutline,
  SettingsOutline,
  PeopleOutline,
  GitNetworkOutline
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()
const activeKey = computed(() => route.path)

const menuOptions = [
  { label: '首页', key: '/', icon: () => h(HomeOutline) },
  { label: '试飞报表', key: '/report', icon: () => h(BarChartOutline) },
  { label: '试飞知识库', key: '/knowledge', icon: () => h(LibraryOutline) },
  { label: '试飞数据库', key: '/database', icon: () => h(ServerOutline) },
  { label: '智能生成', key: '/agent', icon: () => h(CubeOutline) },
  { label: 'AI Agent管理', key: '/ai-agent', icon: () => h(PeopleOutline) },
  { label: '拓扑图设计', key: '/topology', icon: () => h(GitNetworkOutline) },
  { label: '典型案例库', key: '/cases', icon: () => h(BookOutline) },
  { label: '智能对话', key: '/chat', icon: () => h(ChatbubbleOutline) },
  { label: '快捷入口', key: '/quick-access', icon: () => h(RocketOutline) },
  { label: '系统设置', key: '/settings', icon: () => h(SettingsOutline) }
]

const handleSelect = (key) => {
  router.push(key)
}
</script>

<style scoped>
.sidebar-menu {
  height: calc(100vh - 80px);
}
</style>